<script setup lang="ts">
import EchartsOne from "./components/echartsOne.vue";
import EchartsTwo from "./components/echartsTwo.vue";
import EchartsThree from "./components/echartsThree.vue";
import EchartsFour from "./components/echartsFour.vue";

</script>

<template>
  <div class="flex flex-row justify-start">
    <div class="flex flex-col items-start w-60 ml-6">
      <div class="flex flex-col items-center bg-white rounded px-15 pt-6 pb-2 mb-4">
        <p class="text-xs">玩家投入灵石数</p>
        <p class="text-xl font-bold">6,560,566</p>
      </div>
      <div class="flex flex-col items-center bg-white rounded px-15 pt-6 pb-2 mb-4">
        <p class="text-xs">玩家投入灵石数</p>
        <p class="text-xl font-bold">6,560,566</p>
      </div>
      <div class="flex flex-col items-center bg-white rounded px-15 pt-6 pb-2">
        <p class="text-xs">玩家投入灵石数</p>
        <p class="text-xl font-bold">6,560,566</p>
      </div>
    </div>
    <div class="flex flex-col items-start w-60 h-60 ml-6 overflow-auto">
      <p class="text-xs">灵石获得量排名前20</p>
      <p class="text-xs flex flex-row justify-center pt-3" v-for="i in 20" :key="'paiming' + i">
        <span class="w-4.8 h-4.8 pt-0.4 rounded-full bg-red-500 text-white text-[10px] flex flex-row justify-center box-border">{{ i }}</span>
        <span class="mx-3">玩家名</span>
        <span>323,234</span>
      </p>
    </div>
    <EchartsOne />
  </div>
  <div class="flex flex-row justify-between mt-6 mr-6">
    <EchartsTwo />
    <EchartsThree />
  </div>
  <div class="flex flex-row justify-between mt-6 mr-6">
    <EchartsOne />
    <EchartsOne />
  </div>
  <div class="flex flex-row justify-between mt-6 mr-6">
    <EchartsFour />
  </div>

</template>

<style scoped lang="scss">
p{
  margin: 0;
}
</style>
